<template>
  <div class="tabin-config-dialog">
    <div class="header">
      <span class="ft-bold">图文项</span>
    </div>
    <el-card v-for="(item, index) in selectValue" :key="index" shadow="always">
      <div class="card-row">
        <div class="card-head">
          <span class="ellipsis">
            {{ item.type === 'text' ? '文本段落' : '图片' }}{{ index + 1 }}
          </span>
          <div class="operation">
            <el-button
              type="text"
              icon="el-icon-bottom"
              plain
              @click="onSort(index, index + 1)"
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-top"
              plain
              @click="onSort(index, index - 1)"
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              plain
              @click="handleRowDelete(index)"
            ></el-button>
          </div>
        </div>
        <div class="card-form">
          <div v-if="item.type === 'text'" class="card-form-item">
            <span class="card-form-label">是否缩进</span>
            <el-radio-group v-model="item.indent" @change="onChange">
              <el-radio :label="'1'">是</el-radio>
              <el-radio :label="'2'">否</el-radio>
            </el-radio-group>
          </div>
          <div v-if="item.type === 'text'" class="card-form-item">
            <span class="card-form-label">对齐方式</span>
            <el-radio-group v-model="item.align" @change="onChange">
              <el-radio :label="'1'">左</el-radio>
              <el-radio :label="'2'">中</el-radio>
              <el-radio :label="'3'">右</el-radio>
            </el-radio-group>
          </div>
          <div v-if="item.type === 'text'" class="card-form-item col">
            <span class="card-form-label">内容</span>
            <el-input
              v-model="item.content"
              type="textarea"
              placeholder="请输入"
              @input="onChange"
            ></el-input>
          </div>
          <div v-if="item.type === 'image'" class="card-form-item col">
            <span class="card-form-label">图片链接地址</span>
            <el-input
              v-model="item.url"
              type="text"
              placeholder="请输入"
              @input="onChange"
            ></el-input>
          </div>
          <div v-if="item.type === 'image'" class="card-form-item col">
            <span class="card-form-label">图片地址</span>
            <common-upload-file
              v-model="item.content"
              :max="1"
              accept=".jpg,.jpeg,.png"
              @onSuccess="onChange"
            >
            </common-upload-file>
          </div>
        </div>
      </div>
    </el-card>
    <el-dropdown trigger="click" @command="handleCommand">
      <el-card>
        <el-button type="text" icon="el-icon-plus" plain class="full"> 添加 </el-button>
      </el-card>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="TEXT">文本段落</el-dropdown-item>
        <el-dropdown-item command="IMAGE">图片</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import _clonedeep from 'lodash.clonedeep'
import CommonUploadFile from '@/components/common-upload-file'

export default {
  components: {
    CommonUploadFile,
  },
  props: {
    value: {
      type: [Array, String],
      default: () => [],
    },
  },
  data() {
    return {
      visible: false,
      currentIndex: '',
      selectValue: [],
    }
  },
  watch: {
    value: {
      handler(val) {
        this.selectValue = _clonedeep(val)
      },
      immediate: true,
    },
  },
  methods: {
    // 重新排序
    onSort(index, last) {
      // 头尾不可分别向上下移动
      if (last < 0 || last === this.selectValue.length) {
        return
      }
      this.selectValue[index] = this.selectValue.splice(last, 1, this.selectValue[index])[0]
      this.$emit('input', _clonedeep(this.selectValue))
    },
    onChange() {
      this.$emit('input', _clonedeep(this.selectValue))
    },
    handleRowDelete(index) {
      this.selectValue.splice(index, 1)
      this.$emit('input', _clonedeep(this.selectValue))
    },
    // 表格下方添加新字段
    async handleCommand(command) {
      if (command === 'TEXT') {
        this.selectValue.push({
          type: 'text',
          indent: '1',
          align: '1',
          content: '',
        })
      } else {
        this.selectValue.push({
          type: 'image',
        })
      }
      this.$emit('input', _clonedeep(this.selectValue))
    },
  },
}
</script>

<style lang="less" scoped>
.tabin-config-dialog {
  .header {
    display: flex;
    justify-content: space-between;
  }

  :deep(.el-card) {
    margin-bottom: 5px;

    .el-card__body {
      padding: 10px;
    }

    .full {
      width: 246px;
    }
  }

  .card-row {
    display: flex;
    flex-direction: column;

    .operation {
      display: flex;
    }

    span {
      flex: 1;
      overflow: hidden;
    }

    .card-form {
      width: 100%;
      margin-top: 10px;

      &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &.col {
          flex-direction: column;
          align-items: flex-start;
        }
      }

      &-label {
        font-size: 14px;
      }

      .el-radio {
        margin-right: 20px;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .card-head {
      display: flex;
      border-bottom: 1px solid #eee;
    }
  }

  :deep(.el-dialog) {
    .el-dialog__header {
      margin-bottom: 10px;
      padding: 10px 20px 0;
    }
  }
}
</style>
